<template>
	<view class="content">
		<h1 class="title">注册</h1>
		<view class="form">
			<form @submit.prevent="submit">
				<div class="form-group">
					<label for="username">用户名</label>
					<input class="input" type="text" id="username" v-model="formData.username" placeholder="请输入名字" required />
				</div>
				<div class="form-group">
					<label for="password">密码</label>
					<input class="input" type="password" id="password" v-model="formData.password" placeholder="请输入密码" required />
				</div>
				<div class="form-group">
					<label for="confirmPassword">确认密码</label>
					<input class="input" type="password" id="confirmPassword" v-model="formData.confirmPassword" placeholder="请再次输入密码" required />
				</div>
				<div class="form-group">
					<label for="sex">性别</label>
					<input class="input" type="text" id="sex" v-model="formData.sex" placeholder="请输入性别" required />
				</div>
				<div class="form-group">
					<label for="email">邮箱</label>
					<input class="input" type="email" id="email" v-model="formData.email" placeholder="请输入邮箱" required />
				</div>
				<div class="form-group">
					<label for="address">地址</label>
					<input class="input" type="text" id="address" v-model="formData.address" placeholder="请输入地址" required />
				</div>
				<div class="form-group">
					<label for="birth">生日</label>
					<input class="input" type="text" id="birth" v-model="formData.birth" placeholder="请输入生日" required />
				</div>
				<div class="loginBtn" @click="submit">
					<text class="btnValue">注册</text>
				</div>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: '',
					confirmPassword: '',
					sex: '',
					email: '',
					address: '',
					birth: ''
				}
			}
		},
		onLoad() {

		},
		methods: {
			submit() {
				// 进行表单验证
				if (!this.formData.username || !this.formData.password || !this.formData.confirmPassword || !this.formData.sex || !this.formData.email || !this.formData.address || !this.formData.birth) {
					uni.showToast({
						title: '请填写所有必填项',
						icon: 'none'
					});
					return;
				}

				if (this.formData.password !== this.formData.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}

				// 发送注册请求
				this.register();
			},

			req(action, params) {
				uni.showLoading({
					title: '注册中...'
				});
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'http://localhost:8084/user/register', // 后端API地址
						method: 'POST',
						data: params,
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							uni.hideLoading();
							if (res.statusCode === 200) {
								resolve(res.data);
							} else {
								reject(res.data);
							}
						},
						fail: (err) => {
							uni.hideLoading();
							reject(err);
						}
					});
				});
			},

			register() {
				const { username, password, sex, email, address, birth } = this.formData;
				this.req("register", { username, password, sex, email, address, birth }).then(res => {
					console.log(res);
					if (res.status === 1) {
						// 注册成功
						uni.showToast({
							title: '注册成功！',
							icon: 'success',
							duration: 3000 // 弹框显示3秒
						});

						// 延迟3秒后跳转到登录页面
						setTimeout(() => {
							uni.setStorageSync('uni_id_token', res.token);
							uni.setStorageSync('uni_id_token_expired', res.tokenExpired);

							// 使用 navigateTo 跳转到非 tabBar 页面
							uni.navigateTo({
								url: '/pages/login/index'
							});
						}, 3000);
					} else {
						// 注册失败
						uni.showToast({
							title: res.errorMessage,
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error(err);
					uni.showToast({
						title: '网络请求失败，请检查网络或服务器状态',
						icon: 'none'
					});
				});
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.title {
		margin-bottom: 40px;
		color: #333333;
	}
	.form {
		width: 80%;
	}
	.form-group {
		margin-bottom: 20px;
	}
	.form-group label {
		display: block;
		margin-bottom: 5px;
		color: #333333;
	}
	.input {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		border: 0.5px solid #a3a3a3;
		box-sizing: border-box;
		padding: 0 20px;
		font-size: 15px;
	}
	.loginBtn {
		width: 100%;
		height: 80upx;
		background: #a3a3a3;
		border-radius: 50upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.loginBtn .btnValue {
		color: white;
	}
	.forgotBtn {
		text-align: center;
		color: #8d8d8d;
		font-size: 15px;
		margin-top: 20px;
	}
</style>